<template>
  <div class="login">
    <div class="login-con">
      <div style="text-align: center;height: 60px;line-height: 60px;color: white;word-break: keep-all;">
        <h3>欢迎登录优选课管理系统</h3>
      </div>
     <div icon="log-in">
       <div class="form-con">
         <el-form @keydown.enter.native="handleSubmit">
           <div class="iptClass">
             <el-input v-model="username" class="ipt" placeholder="请输入用户名">
               <span slot="prepend">
                 <i class="el-icon-user-solid" />
               </span>
             </el-input>
           </div>
           <div class="iptClass">
             <el-input v-model="password" class="ipt" type="password" placeholder="请输入密码">
               <span slot="prepend">
                 <i class="el-icon-lock" />
               </span>
             </el-input>
           </div>
           <div style="text-align: center;">
             <el-button style="width: 100%;" type="primary" @click="handleSubmit">登录</el-button>
           </div>
         </el-form>
       </div>
     </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      username:"",
      password:"",
    }
  },
  mounted() {
    this.checkLogin()
  },
  methods: {
    async checkLogin() {
      let _this = this
      let res = await _this.$api.getAdminUserInfo()
      if (res.data.level == 'success') {
          this.$message({
            message: '登录成功！',
            type: "success",
            duration: 1000,
            onClose: () => {
              this.$router.push({
                path: '/userList'
              })
            }
          })
        }
    },
    handleSubmit() {
        this.getlogin()
    },
   async getlogin() {
         var _this = this
         const res = await _this.$api.signInUser({
           username: _this.username,
           password:_this.password
         })

         if (res.data.level == 'success') {
           window.localStorage.setItem('user_token', res.data.data);
           this.$message({
             message: '登录成功！',
             type: "success",
             duration:1000,
             onClose:()=>{
               this.$router.push({ path: '/userList' })
             }
           })
         }else {
           this.$message.error(res.data.message);
         }
   }
  }
}
</script>
<style lang="scss" scoped="scoped">
  .login{
    width: 100%;
    height: 100%;
    background-color: #001528;

    .login-con{
      width: 26%;
      margin: auto;
      padding-top: 110px ;

      .form-con{
        .iptClass{
          .code{
            width: 65%;
          }

          .btn-code{
            width: 35%;
          }
        }
      }
    }
  }

  #pwrap{
    /*padding: 4px 20px 26px 20px;*/
    margin-top: 40px;
    color: white;
    text-align: center;
  }
  #spanleft{
    float: left;

  }
  #spanright{
    float: right;
  }
</style>
<style scoped="scoped">

  .iptClass {
    margin-bottom: 20px;
    border: 1px solid #ffffff1a;
  }

  .ipt {
    height: 50px;
  }

  /deep/ .el-input-group__prepend {
    background-color: #0000003d;
    border: none;
  }

  /deep/.el-input-group--prepend .el-input__inner,
  .el-input-group__append {
    background-color: #0000003d;
    height: 50px;
    border: none;
    color: #ecf5ff;
  }

  /deep/.el-input-group__prepend {
    font-size: 18px;
  }

  /deep/.el-input__inner {
    padding: 0;
  }
</style>
